/* eslint-disable no-unused-vars */
/* eslint-disable class-methods-use-this */
/* eslint-disable import/no-cycle */
import React from 'react';
import { Tabs, Form, Input, Button, Radio, DatePicker, Checkbox } from 'antd';
import moment from 'moment';
import BaseControl from './BaseControl';

class DateControl extends BaseControl {
  static create(props, dataProps, extProps) {
    return new DateControl(props, dataProps, extProps);
  }

  constructor(props, dataProps, extProps) {
    const dataProps2 = {
      title: '日期',
      type: 'Date',
      // defaultValue: '',
      required: false, // 是否必填
      widthPercent: 30,
      // height: 30,
      ...dataProps,
    };
    super(props, dataProps2, extProps);
    this.name = '日期';
    // this.icon = '';
  }

  getPropertyTabs(parentForm) {
    return [
      ...super.getPropertyTabs(parentForm),
      <Tabs.TabPane tab="控件配置" key="3">
        <Form.Item label="必填">
          <Checkbox
            checked={this.data.required}
            onChange={(e) => {
              this.data.required = e.target.checked;
              parentForm.refreash();
            }}
          />
        </Form.Item>
        {/* <Form.Item label="默认值">
          <Input
            placeholder="默认值"
            value={this.data.defaultValue}
            onChange={(event) => {
              this.data.defaultValue = event.target.value;
              parentForm.refreash();
            }}
          />
        </Form.Item> */}
      </Tabs.TabPane>,
    ];
  }

  getDesignControl(parentForm) {
    return (
      <DatePicker
        value={moment(this.value || new Date())}
        {...this.extProps}
        onChange={(event, dateString) => {
          this.value = dateString;
          parentForm.refreash();
          this.extProps?.onChange && this.extProps?.onChange(event, dateString);
        }}
      />
    );
  }
}

export default DateControl;
